<template>
  <div class="pay">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="span">工资单设置</span>
      </div>
      <el-button
        type="primary"
        size="small"
        @click="$router.push('/home/addpay')"
        >新增</el-button
      >
      <div class="all">
        <div
          v-for="(i, index) in this.data"
          :key="index"
          :class="cname"
          :id="i._id"
          @mouseenter="enterEve"
          @mouseleave="leaveEve"
        >
          <div class="card1">
            <svg
              t="1684813206065"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="25875"
              width="64"
              height="64"
            >
              <path
                d="M879.104 176.566857c0-48.274286-16.725333-89.721905-50.127238-124.245333-33.645714-34.669714-74.410667-52.028952-122.343619-52.028953H230.034286c-7.509333 0-17.408 0.731429-29.744762 2.194286-13.604571 1.999238-23.064381 3.31581-28.379429 3.852191-9.752381 1.462857-21.113905 4.778667-34.133333 9.898666a239.225905 239.225905 0 0 0-38.034286 20.138667L93.696 40.472381C72.533333 57.392762 56.58819 80.262095 45.714286 109.080381 34.889143 137.752381 29.476571 171.641905 29.476571 210.748952v30.037334h198.363429v588.995047c0 43.690667 14.238476 82.017524 42.715429 114.883048a167.058286 167.058286 0 0 0 105.520761 57.539048h427.008c47.201524 0 89.429333-18.041905 126.732191-54.223239a212.21181 212.21181 0 0 0 65.536-132.242285l3.900952-33.889524H879.055238V176.518095z m-92.842667-82.066286c21.845333 22.77181 32.768 50.127238 32.768 82.066286v605.281524H496.469333l-4.144762 25.892571a193.29219 193.29219 0 0 1-15.11619 58.660572c-9.020952 20.772571-20.72381 37.302857-35.011048 49.590857-19.504762 15.262476-39.497143 23.893333-60.074666 25.892571a105.325714 105.325714 0 0 1-67.242667-38.034285 111.37219 111.37219 0 0 1-26.965333-74.118096V176.615619c0-20.918857-3.900952-41.447619-11.605334-61.683809a174.908952 174.908952 0 0 0-32.475428-54.564572h462.799238c31.061333 0 57.58781 11.410286 79.62819 34.133333z m94.793143 819.297524c-23.893333 18.724571-49.249524 28.086857-76.068571 28.086857H504.417524c25.941333-27.696762 43.885714-61.049905 54.02819-99.961904h374.637715a163.206095 163.206095 0 0 1-52.028953 71.875047zM151.82019 76.55619c6.826667-2.340571 12.775619-1.706667 17.89562 1.950477 4.242286 1.657905 8.43581 3.949714 12.678095 6.875428 2.389333 1.657905 5.510095 4.047238 9.362285 7.168l4.144762 3.900953c1.26781 1.462857 3.31581 4.096 6.046477 7.94819l6.046476 6.095238c2.584381 2.730667 5.266286 7.41181 7.996952 14.043429v1.950476l5.802667 18.139429v3.900952c0 1.462857 0.341333 3.413333 1.072762 5.997714a26.575238 26.575238 0 0 1 1.121524 6.095238v20.089905H91.745524c6.046476-55.442286 26.087619-90.209524 60.074666-104.106667z m348.501334 202.264381a21.601524 21.601524 0 0 0-15.993905-6.095238 22.820571 22.820571 0 0 0-15.993905 6.095238l-20.089904 18.139429a19.114667 19.114667 0 0 0-5.802667 14.09219c0 6.582857 1.950476 11.897905 5.802667 15.945143l82.407619 78.019048-98.401524-1.950476a21.601524 21.601524 0 0 0-15.945143 6.046476 18.67581 18.67581 0 0 0-6.095238 14.043429v25.892571c0 6.046476 2.29181 11.312762 6.875428 15.701333 4.632381 4.242286 10.288762 6.339048 17.066667 6.339048h122.392381v46.323809l-122.392381 1.901715a24.283429 24.283429 0 0 0-16.481524 6.582857 20.089905 20.089905 0 0 0-7.460571 15.457524v25.843809c0 6.095238 2.29181 10.971429 6.875428 14.628572 4.388571 3.705905 10.142476 5.510095 17.066667 5.510095l122.392381-3.852191v47.932953c0 5.851429 2.145524 10.727619 6.582857 14.628571a22.040381 22.040381 0 0 0 15.408762 5.510095l26.185143-1.950476a20.528762 20.528762 0 0 0 14.043428-6.046476 19.748571 19.748571 0 0 0 5.802667-14.043429V579.291429l108.251429-3.852191a17.261714 17.261714 0 0 0 12.970666-6.339048 20.48 20.48 0 0 0 5.217524-13.750857v-23.990857a17.554286 17.554286 0 0 0-5.217524-12.921905 18.18819 18.18819 0 0 0-12.970666-5.266285l-108.251429 1.950476v-46.031238h108.251429c4.973714 0 9.264762-1.706667 12.970666-5.217524a17.261714 17.261714 0 0 0 5.217524-12.678095v-24.234667a20.528762 20.528762 0 0 0-6.046476-14.043428c-6.095238-3.900952-10.727619-5.802667-14.043429-5.802667l-82.115047-2.194286 69.973333-68.022857a19.260952 19.260952 0 0 0 0-28.135619l-15.993905-17.895619a19.260952 19.260952 0 0 0-14.043428-6.046476 30.232381 30.232381 0 0 0-14.043429 4.144762l-69.973333 63.878095a19.260952 19.260952 0 0 1-28.086857 0l-76.312381-74.118095z"
                fill="#3399ff"
                p-id="25876"
              ></path>
            </svg>
            <div class="card_contents">
              <h2 class="a1">{{ i.name }}</h2>
              <p>关联薪资方案：{{ i.method.name }}</p>
              <p>创建时间：{{ i.day | date }}</p>
            </div>
          </div>
          <div class="card2">
            <el-button type="text">复制</el-button>
            <el-button type="text" @click="editPays(i)">编辑</el-button>
            <el-button type="text" @click="delPays(i)">删除</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { Message } from 'element-ui';
export default {
  name: "APIPay",

  data() {
    return {
      data: [],
      cname: "card_content",
    };
  },

  mounted() {
    this.getPays();
  },

  methods: {
    //删除
    async delPays(i){
      let {data:{code,msg}} = await axios.delete('/xz/delMb?id='+i._id)
      if(code == 200){
        Message.success(msg)
        this.getPays()
      }
    },
    //编辑
    editPays(i) {
      this.$router.push({
        path:'/home/editpay',
        query:{
          state:i
        }
      });
    },
    async getPays() {
      let { data } = await axios.get("/xz/getMb");
      this.data = data;
    },
    enterEve(e) {
      e.target.className = "card_content1";
    },
    leaveEve(e) {
      e.target.className = "card_content";
    },
  },
};
</script>

<style lang="scss" scoped>
.span {
  font-weight: bold;
  font-size: 18px;
}
.card_content {
  background: white;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgb(170, 167, 167);
  width: 45%;
  margin: 20px 20px 20px 0;
  word-break: break-all;
}
.card_content1 {
  background: white;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgb(96, 95, 95);
  width: 45%;
  margin: 20px 20px 20px 0;
  word-break: break-all;
}
.card1 {
  display: flex;
}
.a1 {
  color: #3399ff;
  margin: 15px;
}
svg {
  margin: 20px 10px 0 20px;
}
.card_contents > p {
  margin: 20px 0 10px 15px;
  font-size: 12px;
}
.card2 {
  margin: 10px 0 0 30px;
}
.card2 > .el-button {
  margin-right: 35px;
  padding-bottom: 15px;
}
.all {
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
  width: 100%;
}
</style>